<!-- 添加主容器中的栅格系统 -->
<template>
  <div class="add-container-col" v-if="dialogShow">
    <SetDesignDialog :title="formName + ' 设置'" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" :hasfooter="hasfooter" ref="settingDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本设置" name="1">
            <div class="grid-content bg-purple">
              <!-- <el-form :label-width="formLabelWidth">
                <el-form-item v-if="form && form.config" label="显示设备" style="margin-bottom: 0px;">
                  <el-radio-group v-model="form.config.deviceHidden">
                    <el-radio size="mini" :label="0">全部显示</el-radio>
                    <el-radio size="mini" :label="1">只电脑端显示</el-radio>
                    <el-radio size="mini" :label="2">只手机端显示</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form> -->
              <el-form :label-width="formLabelWidth" @submit.native.prevent v-if="form">
                <el-form-item label="按钮文字" style="margin-bottom: 0px;">
                  <el-input size="mini" v-model="form.buttomText" style="width: 120px;" maxlength="50"
                    placeholder="输入按钮显示文字，为空不显示按钮">
                  </el-input>
                </el-form-item>
              </el-form>
              <el-form :label-width="formLabelWidth" @submit.native.prevent v-if="form">
                <el-form-item label="验证码框文字" style="margin-bottom: 0px;">
                  <el-input size="mini" v-model="form.vcodePlaceHolder" style="width: 160px;" maxlength="50"
                    placeholder="输入验证码默认显示文字">
                  </el-input>
                </el-form-item>
              </el-form>
              <el-form :label-width="formLabelWidth" @submit.native.prevent v-if="form && form.config">
                <el-form-item label="验证码左间距" style="margin-bottom: 0px;">
                  <el-input
                    @blur="isNaN(parseFloat(form.config.codeMarginLeft)) ? form.config.codeMarginLeft = '' : form.config.codeMarginLeft = parseFloat(form.config.codeMarginLeft).toFixed(2)"
                    size="mini" v-model="form.config.codeMarginLeft" style="width: 90px;" maxlength="12"
                    placeholder="间距距离">
                  </el-input>
                  <span class="tip-color">（单位 em）</span>
                </el-form-item>
              </el-form>
              <el-form :label-width="formLabelWidth" @submit.native.prevent v-if="form && form.config">
                <el-form-item label="按钮左间距" style="margin-bottom: 0px;">
                  <el-input
                    @blur="isNaN(parseFloat(form.config.buttonMarginLeft)) ? form.config.buttonMarginLeft = '' : form.config.buttonMarginLeft = parseFloat(form.config.buttonMarginLeft).toFixed(2)"
                    size="mini" v-model="form.config.buttonMarginLeft" style="width: 90px;" maxlength="12"
                    placeholder="间距距离">
                  </el-input>
                  <span class="tip-color">（单位 em）</span>
                </el-form-item>
              </el-form>
              <el-form :label-width="formLabelWidth" v-if="form && form.config">
                <el-form-item label="提示方式" style="margin-bottom: 0px;">
                  <el-radio-group v-model="form.config.tipStyle">
                    <el-radio size="mini" :label="0">弹窗</el-radio>
                    <el-radio size="mini" :label="1">按钮下方</el-radio>
                    <el-radio size="mini" :label="2">成功跳转新页面</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <el-form :label-width="formLabelWidth" @submit.native.prevent v-if="form && form.config && form.config.tipStyle === 2">
                <el-form-item label="成功跳转链接地址" style="margin-bottom: 0px;">
                  <el-input size="mini" v-model.trim="form.config.successHref" style="width: 400px;" placeholder="">
                  </el-input>
                </el-form-item>
                <el-form-item label="打开方式" style="margin-bottom: 0px;">
                  <el-radio-group v-model="form.config.linkTarget">
                    <el-radio :label="'_self'">当前窗口</el-radio>
                    <el-radio :label="'_blank'">新开窗口</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="提示内容" name="2">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth2" @submit.native.prevent>
                    <el-form-item v-if="form" label="成功弹窗标题" style="margin-bottom: 0px;">
                      <el-input @blur="formTextBlur('successTitleText','提示')" size="mini" v-model="form.successTitleText"
                        maxlength="32" placeholder="标题">
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth2" @submit.native.prevent>
                    <el-form-item v-if="form" label="成功弹窗按钮" style="margin-bottom: 0px;">
                      <el-input @blur="formTextBlur('successButtonText','确认')" size="mini" v-model="form.successButtonText"
                        maxlength="32" placeholder="按钮">
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth2" @submit.native.prevent>
                    <el-form-item v-if="form" label="失败弹窗标题" style="margin-bottom: 0px;">
                      <el-input @blur="formTextBlur('errorTitleText','提示')" size="mini" v-model="form.errorTitleText"
                        maxlength="32" placeholder="标题">
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth2" @submit.native.prevent>
                    <el-form-item v-if="form" label="失败弹窗按钮" style="margin-bottom: 0px;">
                      <el-input @blur="formTextBlur('errorButtonText','确认')" size="mini" v-model="form.errorButtonText"
                        maxlength="32" placeholder="按钮">
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form :label-width="formLabelWidth2" @submit.native.prevent>
                    <el-form-item v-if="form" label="提交成功后提示" style="margin-bottom: 8px;">
                      <el-input @blur="formTextBlur('errorButtonText','提交成功！')" type="textarea" size="mini"
                        v-model="form.requestSuccess" maxlength="64" :rows="2" placeholder="成功后提示内容">
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form :label-width="formLabelWidth2" @submit.native.prevent>
                    <el-form-item v-if="form" label="验证码格式提示" style="margin-bottom: 8px;">
                      <el-input @blur="formTextBlur('errorButtonText','请输入4位验证码！')" type="textarea" size="mini"
                        v-model="form.captchaRuleText" maxlength="64" :rows="2" placeholder="输入4位验证码格式不正确的情况下提示内容">
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form :label-width="formLabelWidth2" @submit.native.prevent>
                    <el-form-item v-if="form" label="验证码校验提示" style="margin-bottom: 0px;">
                      <el-input @blur="formTextBlur('errorButtonText','输入的验证码不匹配')" type="textarea" size="mini"
                        v-model="form.captchaValid" maxlength="64" :rows="2" placeholder="输入验证码提交到后台不匹配时提示内容">
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="栅格设置" name="3">
            <div class="grid-content bg-purple cols-list">
              <el-table v-loading="loading" :data="bjContainerFormCols" height="314" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut">
                <el-table-column label="序号" width="60" align="center">
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column label="ID" align="center">
                  <template slot-scope="scope">
                    {{scope.row._other._tmpId}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template slot-scope="scope">
                    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true, 'displayNo':isFirst(scope.$index)}" @click="clickUp(scope.$index, scope.row._other._tmpId)"></i>
                    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo':isLast(scope.$index)}" @click="clickDown(scope.$index, scope.row._other._tmpId)"></i>
                    <i class="el-icon-delete" @click="deleteCol(scope.row._other._tmpId)"></i>
                  </template>
                </el-table-column>
              </el-table>
              <div class="add-btn">
                <el-button @click="addCol" type="success" size="small">添加</el-button>
              </div>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </SetDesignDialog >
    <DialogAddContainerFormCol ref="addContainerCol" :tmpContainerId="bjContainerFormMainbox._other._tmpId" :updateBjContainerCols="updateBjContainerCols" />
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import DialogAddContainerFormCol from '@/components/common/design/dialog/DialogAddContainerFormCol.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
// import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
import _ from 'lodash'
export default {
  computed: {
    ...mapState([
      'design'
    ]),
    isFirst () {
      return function (index) {
        if (index === 0) {
          return true
        } else {
          return false
        }
      }
    },
    isLast () {
      return function (index) {
        let len = this.bjContainerFormCols.length
        if (index === (len - 1)) {
          return true
        } else {
          return false
        }
      }
    }
  },
  created () {
    // 添加栅格
    VueFunctions.method(WindowType.EDIT_CONTAINER_FORMMAINBOX, (bjContainerFormMainbox, bjContainerFormCols, form) => {
      this.close()
      this.dialogShow = true
      this.formName = form.name
      this.bjContainerFormMainbox = bjContainerFormMainbox
      this.form = bjContainerFormMainbox.render.data
      this.bjContainerFormCols = bjContainerFormCols

      this.$nextTick(() => {
        if (this.$refs['settingDialog']) {
          this.$refs['settingDialog'].open()
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      formName: '表单',
      activeName: '1',
      formLabelWidth: '135px',
      formLabelWidth2: '128px',
      hasfooter: true,
      bjContainerFormMainbox: null,
      bjContainerFormCols: null,
      form: null
      // form: {
      //   buttomText: '',
      //   vcodePlaceHolder: '',
      //   config: {
      //     buttonMarginLeft: '',
      //     codeMarginLeft: '',
      //     deviceHidden: 0
      //   },
      //   requestSuccess: '',
      //   successTitleText: '',
      //   successButtonText: '',
      //   captchaRuleText: '',
      //   captchaValid: '',
      //   errorTitleText: '',
      //   errorButtonText: ''
      // }
    }
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      if (tab.name === '3') {
        this.hasfooter = false
      } else {
        this.hasfooter = true
      }
    },
    formTextBlur (key, content) {
      if (!this.form[key]) {
        this.form[key] = content
      }
    },
    clickUp (index, tmpId) {
      if (!this.isFirst(index)) {
        let arrId = []
        this.bjContainerFormCols.forEach(el => {
          arrId.push(el._other._tmpId)
        })
        if (arrId.indexOf(tmpId) > -1) {
          let filterArr = this.bjContainerFormCols.splice(arrId.indexOf(tmpId), 1)
          this.bjContainerFormCols.splice(arrId.indexOf(tmpId) - 1, 0, filterArr[0])
          BackendjsFunctions.sortContainerFormcol(_.cloneDeep(this.bjContainerFormCols))
        }
      }
    },
    clickDown (index, tmpId) {
      if (!this.isLast(index)) {
        let arrId = []
        this.bjContainerFormCols.forEach(el => {
          arrId.push(el._other._tmpId)
        })
        if (arrId.indexOf(tmpId) > -1) {
          let filterArr = this.bjContainerFormCols.splice(arrId.indexOf(tmpId), 1)
          this.bjContainerFormCols.splice(arrId.indexOf(tmpId) + 1, 0, filterArr[0])
          BackendjsFunctions.sortContainerFormcol(_.cloneDeep(this.bjContainerFormCols))
        }
      }
    },
    deleteCol (tmpId) {
      let isDelete = BackendjsFunctions.isDelContainerFormColBox(tmpId)
      if (isDelete) {
        this.bjContainerFormCols = _.cloneDeep(BackendjsFunctions.delContainerFormcol(tmpId))
      }
    },
    addCol () {
      this.$refs['addContainerCol'].show()
    },
    updateBjContainerCols (fellbackdata) {
      this.bjContainerFormCols = _.cloneDeep(fellbackdata)
    },
    handleMouseEnter (row, column, cell, event) {
      BackendjsFunctions.showShadowFormContainer(row._other._tmpId)
      BackendjsFunctions.scrollFormContainer(row._other._tmpId)
    },
    handleMouseOut (row, column, cell, event) {
      let hasTmpId = this.bjContainerFormCols.filter(item => {
        return item._other._tmpId === row._other._tmpId
      })
      if (hasTmpId.length > 0) {
        BackendjsFunctions.hideShadowFormContainer(row._other._tmpId)
      }
    },
    close () {
      this.dialogShow = false
      this.loading = false
      this.formName = '表单'
      this.activeName = '1'
      this.hasfooter = true
      this.bjContainerFormMainbox = null
      this.bjContainerFormCols = null
      this.form = null
    },
    saveclose () {
      if (this.form.config.tipStyle === 2) {
        if (!this.form.config.successHref || this.form.config.successHref.trim() === '') {
          this.$message.error('请输入成功跳转链接地址')
          return
        }
        let bool = /^(\/|\/\/|http:\/\/|https:\/\/).*?/.test(this.form.config.successHref.trim())
        if (!bool) {
          this.$message.error('请输入正确成功跳转链接地址')
          return
        }
      }
      this.bjContainerFormMainbox.render.data = this.form
      BackendjsFunctions.setContainerFormmainbox(_.cloneDeep(this.bjContainerFormMainbox))
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    DialogAddContainerFormCol
  }
}

</script>

<style scoped lang="scss">
.edit-container-u {
  width: 800px;
  min-height: 420px;
}
.add-btn {
  margin-top: 20px;
  text-align: right;
}
.cols-list {
  /deep/ table th {
    color: #555;
    font-weight: normal;
  }
  i {
    font-size: 18px;
    cursor: pointer;
    margin:0 3px;
    &.iconfont{
      font-size: 20px;
    }
    &:hover {
      color: #258ffb;
    }
  }
  .displayNo {
    color: #888888;
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      color: #888888;
    }
  }
}
</style>
